<extend name="common/base" />
<block name="css"></block>
<block name="resource">
   <link href="__ASSET__/Home/v4/src/css/home.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
   <link href="__PUBLIC__/Home/v4/src/css/user-center.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/uploadify.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/jquery.Jcrop.css" rel="stylesheet">
   <link href="__ASSET__/Home/v4/src/css/profile.css" rel="stylesheet">
   <script src="__ASSET__/Home/v4/lib/js/jquery.uploadify.min.js" ></script>
   <script src="__ASSET__/Home/v4/lib/js/jquery.Jcrop.js" ></script>
</block>
<block name="content">
    <!--中间位置-->
    <div class="main container">
        <div class="user-center-main white-bg gray-border marginb20">
            <!--左边板块-->
            <include file="Ucenter/baseinfo" />
            <!--右边板块-->
            <div class="user-main-right">
                <p class="safe_account">个人资料</p>
                <p class="safe_account feedback_account">
                     头像、背景图
                </p>
                <div class="profile_head_bg">
                        <div   class="show_img_area left" >
                          <!-- http://static.66play.com/Uploads/Picture/2016-08-06/57a5c626b5bad.jpg?iopcmd=thumbnail&type=8&width=200 -->
                            <p  class="profile_preview">预览效果</p>
                             <notempty name="user.background">
                            <div class="bg_area_1 bg_area_2 bg_area_3" style="background:url('{$user.background|default='__ASSET__/Home/v4/src/images/bg-mr.png'}') no-repeat  scroll 0 0 / 100% 100%;">
                                <else />
                            <div class="bg_area_1 bg_area_2 bg_area_3" style="background:url('__ASSET__/Home/v4/src/images/bg-mr.png') no-repeat  scroll 0 0 / 100% 100%;">
                            </notempty>
                            <div class="profile_icon">
                                <div class="profile-avatar-img relative">
                                      <img src="{$user.avatar|default='__ASSET__/Home/v4/src/images/avatar-mr.png'}" width="75" height="75">
                                      <notempty name="user.auth">
                                          <img src="{$user.auth.pic}" style="border: none;" class="newG-icon" title="{$user.auth.name}" alt="{$user.auth.name}">
                                       </notempty>
                                </div>
                            </div>
                                <div class="name">
                                     <span class="level green-bg font12">Lv.{$user.level}</span>
                                     <span class="nicheng font14">{$user.nickname}</span>
                                     <switch name="user.gender">
                                       <case value="男">
                                          <img src="__ASSET__/Home/v4/src/images/sex.png" class="sex_img"/>
                                       </case>
                                       <case value="女">
                                          <img src="__ASSET__/Home/v4/src/images/girl.png" class="sex_img"/>
                                       </case>
                                     </switch>
                                </div>
                                <ul class="mine font13">
                                    <li>
                                        <a title="粉丝" href="javascript:void(0);">
                                            <i class="mine-img1"></i>
                                            <div class="mine-span overflow">粉丝：{$user.statis.fans|default=0}</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a title="关注" href="javascript:void(0);">
                                            <i class="mine-img2"></i>
                                            <div class="mine-span overflow">关注：{$user.statis.follows|default=0}</div>
                                        </a>
                                    </li>
                                    <li>
                                        <a title="游戏" href="javascript:void(0);">
                                            <i class="mine-img3"></i>
                                            <div class="mine-span overflow">游戏：{$user.statis.scribe|default=0}</div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div   class="upload_img_area left">
                             <p class="upload_text_1">上传头像</p>
                             <p class="upload_text_1">选择本地图片，上传编辑自己的头像。</p>
                             <p class="upload_text_1 upload_text_2"><button class="upload_btn upload_btn_head">上传</button>支持jpg、jpeg、gif、png、bmp格式的图片。</p>
                              <p class="upload_text_1">上传背景图</p>
                             <p class="upload_text_1">选择本地图片，上传编辑自己的背景图片。</p>
                             <p class="upload_text_1 upload_text_2"><button class="upload_btn upload_bg_btn">上传</button>支持jpg、jpeg、gif、png、bmp格式的图片。</p>
                        </div>
                </div>
                 <p class="safe_account feedback_account">
                     基本信息
                     <span class="save_blue_btn save_blue_float save_info">保存</span>
                </p>
                <div class="container-fluid">
                      <div class="row">
                              <div class="col-xs-2">
                                    <p class="account_info_p font13 relative"><i class="icon_p_1"></i>个人简介</p>
                              </div>
                              <div class="col-xs-10">
                                   <textarea name="desc" class="form-control js-jianyi js-jianyi-1">{$user.desc}</textarea>
                                   <p class="js-inputNum">还能输入210字</p>
                              </div>
                      </div>
                      <div class="row" style="margin-top:10px;">
                             <div class="col-xs-4">
                                  <p class="account_info_p account_info_p_1 font13 left" style="text-indent:0;padding-left:26px;margin-right:86px;">
                                       <i class="icon_p_1 icon_p_2"></i>性别
                                  </p>
                                  <select name="gender" class="form-control select-my-width">
                                          <option value='保密' >保密</option>
                                          <option value='男' <if condition="$user.gender eq '男'">selected</if>>男</option>
                                          <option value='女' <if condition="$user.gender eq '女'">selected</if>>女</option>
                                  </select>
                             </div>
                             <div class="col-xs-4">
                                   <p class="account_info_p account_info_p_1 font13 left" style="text-indent:80px;margin-right:60px;">
                                     <i class="icon_p_1 icon_p_3" style="left:50px;"></i>年龄
                                   </p>
                                   <select name="age" class="form-control select-my-width">
                                        <volist name="ages" id="age">
                                            <if condition="$user.age eq $age">
                                                <option value="{$age}" selected="selected">{$age}</option>
                                            <else />
                                                <option value="{$age}">{$age}</option>
                                            </if>
                                        </volist>
                                   </select>
                             </div>
                             <div class="col-xs-4">
                                  <p class="account_info_p account_info_p_1 font13 left" style="margin-right:0;margin-left:85px;">
                                    <i class="icon_p_1 icon_p_4" style="left:80px;"></i>星座
                                  </p>
                                  <select name="stars" class="form-control select-my-width right" style="padding-left:3px;">
                                        <volist name="stars" id="star">
                                            <if condition="$user.stars eq $star">
                                                <option value="{$star}" selected="selected">{$star}</option>
                                            <else />
                                                <option value="{$star}">{$star}</option>
                                            </if>
                                        </volist>
                                  </select>
                             </div>
                      </div>
                      <div class="row div-row" style="margin-top:25px;">
                             <div class="col-xs-2">
                                  <p class="account_info_p font13 left">
                                    <i class="icon_p_1 icon_p_5"></i><span class="info_title">擅长游戏</span>
                                  </p>
                             </div>
                             <div class="mc col-xs-8" data-type="game">
                                  <ul  class="game_area game_area_ul">
                                  <volist name="user.game" id="game">
                                      <li class="relative">
                                            <span>{$game}</span><i class="game_icon_r">x</i>
                                       </li>
                                  </volist>
                                  </ul>
                                  <input type="hidden" name="good_games" value="{$games}">
                                  <span class="add_but left"   >
                                       <span class="glyphicon glyphicon-plus font12" aria-hidden="true"></span>新增
                                  </span>
                             </div>
                      </div>
                      <div class="row div-row" style="margin-top:15px;">
                             <div class="col-xs-2">
                                  <p class="account_info_p font13 left">
                                     <i class="icon_p_1 icon_p_6"></i><span class="info_title">兴趣爱好</span>
                                  </p>
                             </div>
                             <div class="mc col-xs-8" data-type="game_love">
                                  <ul  class="game_love_area game_area_ul"> 
                                    <volist name="interest" id="i">
                                       <li class="relative">
                                            <span>{$i}</span><i class="game_icon_r">x</i>
                                       </li>
                                    </volist>
                                  </ul>
                                  <input type="hidden" name="hobby" value="{$user.interest}">
                                  <span class="add_but left"   >
                                        <span class="glyphicon glyphicon-plus font12" aria-hidden="true"></span>新增
                                  </span>
                             </div>
                      </div>
                       <div class="row" style="margin-top:15px;">
                             <div class="col-xs-2">
                                  <p class="account_info_p font13 left" style="padding-top:6px;">
                                    <i class="icon_p_1 icon_p_7"></i>注册时间
                                  </p>
                             </div>
                             <div class="col-xs-8">
                                   <input type="text"  style="width:130px;" class="form-control input-text" readonly="true" value="{$user.reg_time|date='Y-m-d',###}">
                             </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="component">
   <script src="__ASSET__/Home/v4/dist/js/upload_avatar.js?v=1.3"></script>
   <script src="__ASSET__/Home/v4/dist/js/upload_background.js?v=1.3"></script>
   <script src="__ASSET__/Home/v4/dist/js/person_info.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/set_common_bg.js?v=1.0"></script>
   <script>
      window._THIS = {
        FACEURL: "{:U('File/uploadPicture')}",
        setAvatar:"{:U('setAvatar')}",
        setProfile:"{:U('Ucenter/setProfile')}",
        setBackground:"{:U('Ucenter/setBackground')}"
    }; 
    $('.js-tab-profile').addClass('active');
   </script> 
</block>